<!--
 * @Author: your name
 * @Date: 2022-02-26 13:43:33
 * @LastEditTime: 2022-04-12 18:26:16
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\components\zh-row-blank\zh-row-blank.vue
-->
<!-- 横着的柱状图 -->
<template>
  <div class="row-bar">
    <div class="row-bar-left">
      <div>{{ rowtitle }}</div>
      <div>(共{{ allnum }}次)</div>
    </div>
    <div class="row-bar-box">
      <div
        v-for="(item, index) in blankList"
        :key="index"
        class="row-bar-item"
        :style="{
          width: item.prence + 'px',
          'background-color': item.color
        }"
      >
        {{ item.name }}:{{ item.value }}{{ item.unit }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ZhRowBlank",
  props: {
    rowtitle: {
      type: String,
      default: () => {
        return "发生病害总次数";
      }
    },
    rowblankList: {
      type: Array,
      default: () => {
        return [
          {
            name: "稻瘟病",
            value: 2, // 必须为数字
            unit: "次",
            allnum: 5, // 总数
            prence: "220",
            color: ""
          },
          {
            name: "水稻白叶枯",
            value: 1, // 必须为数字
            unit: "次",
            allnum: 5, // 总数
            prence: "220",
            color: ""
          },
          {
            name: "稻曲病",
            value: 2, // 必须为数字
            unit: "次",
            allnum: 5, // 总数
            prence: "110",
            color: ""
          }
        ];
      }
      // 值在0到100之间
      // validator: val => {
      // 	return val >= 0 && val <= 100;
      // }
    }
  },
  data() {
    return {
      barwidth: 1000,
      colorList: ["#ffc300", "#43cf7c", "#82e5ff", "#00baae"],
      blankList: [],
      allnum: 0,
      allbarwidth: 0
    };
  },
  watch: {
    rowblankList: {
      handler(val) {
        this.setwidth(this.rowblankList);
      }
    }
  },
  mounted() {
    let rowblankList = this.rowblankList;
    // console.log(rowblankList)
    setTimeout(() => {
      this.setwidth(rowblankList);
    }, 200);
  },
  methods: {
    // 增加长度和颜色
    setwidth(rowblankList) {
      this.allnum = 0
      this.blankList = [];
      rowblankList.forEach((item, index) => {
        let baifen = item.value / item.allnum;
        if (baifen > 1) {
          baifen = 0.6;
        } else if (baifen < 0.3) {
          baifen = 0.4;
        }
        item.barwidth = baifen * this.barwidth;
        item.color = this.colorList[index % 4];
        this.blankList.push(item);
      });
      // console.log(rowblankList)
      let list = rowblankList.map(item => item.value);
      list.forEach(item => {
        this.allnum += item;
      });
    }
  }
};
</script>

<style lang="scss">
.row-bar {
  width: 1260px;
  // height: 60px;
  // background-color: #286b7d;
  display: flex;
  flex-wrap: nowrap;
  margin-top: 10px;
  .row-bar-box {
    display: flex;
    overflow-x: auto;
  }
  .row-bar-item {
    height: 60px;
    padding: 0px 30px;
    text-align: center;
    white-space: nowrap;
    display: inline-block;
    color: #0f4452;
    line-height: 60px;
  }
}
.row-bar-left {
  text-align: right;
  height: 60px;
  white-space: nowrap;
  line-height: 30px;
  margin-right: 20px;
  :nth-child(1) {
    font-weight: 600;
  }
}
</style>
